<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>08下拉菜单</title>
</head>
<style>
    ul{
        list-style: none;        
    }
    a{
        text-decoration: none;
        color: black;
    }
    .wrap{
        margin: 100px 0 0 100px;
        width: 600px;
        height: 110px;
        /* background-color: red; */
    }
    .wrap>ul>li{
        float: left;
        width: 150px;
        background-color: gray;
    }
    .wrap>ul>li{
        margin-right: 20px;
        text-align: center;
        line-height: 40px;
    }
    .wrap>ul>li>a {
        margin-right: 40px;
        margin: 0 auto;
    }
    .wrap .ul{
        padding-left: 0; 
        margin: 0;
        display: none;        
    }
</style>
<body>
    
    <div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二级菜单11</a></li>
                    <li><a href="javascript:void(0);">二级菜单22</a></li>
                    <li><a href="javascript:void(0);">二级菜单33</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单2</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二级菜单11</a></li>
                    <li><a href="javascript:void(0);">二级菜单22</a></li>
                    <li><a href="javascript:void(0);">二级菜单33</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单3</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二级菜单11</a></li>
                    <li><a href="javascript:void(0);">二级菜单22</a></li>
                    <li><a href="javascript:void(0);">二级菜单33</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="../jquery-3.2.1.js"></script>
    <script>
    
        $(function(){
            var $li = $(".wrap>ul>li")
            // 给li注册经过事件
            $li.mouseover(function(){
                 // 找到儿子
                $(this).children("ul").show(); 
            });

            // 注册移出事件
            $li.mouseout(function(){
                $(this).children("ul").hide(); 
            });
        });
    
    </script>
</body>
</html>